<template>
  <div class="createCource">
    <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>智慧体育课堂</el-breadcrumb-item>
          <el-breadcrumb-item>我的班级</el-breadcrumb-item>
        </el-breadcrumb>

      </div>
      <div @click="back" class="top-right">
        返回
      </div>
    </div>
    <div class="student">
      <div class="student-main">
        <div v-for="item in classList" class="student-item">
          <div class="item-studentName">
            {{item.allName}}
          </div>
          <div class="item-total">
            班级人数{{item.stuCount}}人
          </div>
          <div class="item-info">
            <button @click="go(item)">班级详情</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {classInfoList} from "@/api/school/class";

export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      classList:[],
      pageInfo: {
        userId:this.$store.state.user.USER_INFO.id,
        pageNum:1,
        pageSize:10
      }
    };
  },
  created() {
    this.getClassInfoList()
  },
  methods: {
    getClassInfoList(){
      classInfoList(this.pageInfo).then(response=>{
        console.log(response);
        if(response.code == 200){
          this.classList = response.result
        }
      })
    },

    back(){
      this.$router.back()
    },
    go(item){
      console.log(item);
      this.$router.push({path:"classMessage",query:{classId:item.classId}})
    }
  }
}
</script>

<style lang="scss" scoped>
.createCource {
  width: 80vw;
  margin: auto;
  .course-top {
    display: flex;
    justify-content: space-between;
    padding: 1vh 0;
    ::v-deep .el-breadcrumb__inner {
      font-size: 1vw;

    }
    .top-right {
      font-size: 1vw ;
      color: #1677FF;
    }
  }
  .student {
    height: 80vh;
    overflow-y: auto;
    padding-bottom: 5vh;
    background: #fff;
    .student-main {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 1vw; /* 子元素之间的边距 */
      padding-left: 1vw;
      padding-top: 3vh;
      .student-item {
        width: 25vw;
        //flex: 0 0 calc(25% - 10px); /* 子元素的宽度和边距 */
        box-shadow: 0 0 .2vw 0px rgba(0,0,0,0.2);
        box-sizing: border-box;
        margin-top: 1vh;
        display: flex;
        padding: 0vw  1vw;
        justify-content: space-around;
        align-items: center;
        .item-studentName {
          width: 15vw;
          font-size: 1.2vw ;
          color:#333333 ;
          margin-left: 1vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; /* 使用省略号来指示被截断的内容 */
        }
        .item-total {
          width: 5vw;
          font-size: 1vw;
          white-space: nowrap;
          color:#666666 ;
          margin: 1vw;
        }
        .item-info {
          width: 6vw;
          margin-left: 1vw;
          button {
            white-space: nowrap;
            cursor: pointer;
            padding: .3vw;
            border: .07vw solid #1677FF;
            color: #1677FF;
            font-size: 1vw;
            background: none;
          }
        }
      }
    }
  }
}
</style>
